<template>
    <el-container class="home-container">
      <el-header class="header">
          <div>
              <img src="../assets/logo.png" alt="">
              <span>后台管理系统</span>
          </div>
        <el-button type="info" @click="logout"> 退出 </el-button>
      </el-header>
      <el-container>
        <el-aside :width="menuData.zhankai ? '64px' : '200px'">
            <div class="tog" @click="tog">
                    !!!
            </div>
            <el-menu background-color="#5c5e74" text-color="#fff" unique-opened :collapse="menuData.zhankai" router>
                <el-sub-menu :index="item.id + ''" v-for="item in menuData.list" :key="item.id">
                    <template #title>
                        <el-icon><location /></el-icon>
                        <span>{{item.authName}}</span>
                    </template>
                    <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">
                         <template #title>
                            <el-icon><location /></el-icon>
                            <span>{{subItem.authName}}</span>
                        </template>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
</template>
<script lang="ts" setup>
import { ref,reactive } from 'vue'
import {get,post,store} from '../js/'
import { onMounted } from "@vue/runtime-core"

import {
    Location
} from '@element-plus/icons-vue'

import { useRouter } from "vue-router"

const router = useRouter()



function logout(){
    store.remove('token')
    router.push('/login')
}

function tog() {
    menuData.zhankai = !menuData.zhankai
}


//menu
var menuData = reactive({
    list: [],
    zhankai: false
})

function getMenu() {
    get('/menus').then((res) => {
        menuData.list = res.data.data;
    });
}
onMounted(() => {
    getMenu()
})

</script>
<style lang="less" scoped>
.home-container {
  height: 100%;
}

 .el-aside {
     background-color: #5c5e74;
 }
 .header {
     display: flex;
     justify-content: space-between;
     background-color: #5c5e74;
     align-items: center;
     color: rgb(236, 241, 241);
     >div {
         display: flex;
         align-items: center;
     }
     div img {
         width: 30px;
         height: 30px;
     }


 }
 .el-main {
     background-color: rgb(243, 242, 240);
 }

 .tog{
     background-color: rgb(142, 147, 179);
     font-size: 10px;
     line-height: 24px;
     color: #fff;
     text-align: center;
     letter-spacing: 2em;
 }

</style>